import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { Card, CardBody, CardHeader, CardTitle, Col, Row } from 'reactstrap'
import ProfileForm from '../../components/profile/ProfileForm'
import CustomSpinner from '../../components/spinner/Spinner'
import { getMyProfileAction } from '../../redux/profile/profileAction'
import { resetGetMyProfile } from '../../redux/profile/profileSlice'

const Profile = () => {
  const dispatch = useDispatch()
  const { loading } = useSelector((state) => state.myProfile)
  useEffect(() => {
    dispatch(getMyProfileAction())
    return () => {
      dispatch(resetGetMyProfile())
    }
  }, [])

  return (
    <>
      <Card className="padding-left margin-bottom-0">
        <CardHeader className="bgyellowish">
          <CardTitle className="fw-800 pl-2 black">Profile</CardTitle>
          {/* <Button className="button-green sm-none">Request Appointment</Button> */}
          {/* <div className='AppointmentTitle d-sm-none'>
            <Button size='sm' className='button-green'>
              Request Appointment
            </Button>
          </div> */}
        </CardHeader>
        <CardBody className="px-0 card-body-styling py-0">
          {loading ? (
            <CustomSpinner />
          ) : (
            <Row>
              <Col lg="12">
                {' '}
                <ProfileForm />
              </Col>
            </Row>
          )}
        </CardBody>
      </Card>
    </>
  )
}

export default Profile
